<template>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">购物车</a>
      <div class="navbar-text pull-right">
        <span>您的购物车当前一共有{{ getSumCount }}件商品，总价格为{{ getSumPrice }}元 </span>
        <router-link to="/cart"><button class="btn btn-danger">购物车</button></router-link>
      </div>
    </div>
  </nav>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  name: "Header",
  computed:{
    /*通过vuex获得getters过滤之后购物车的价格总和、数量总和*/
    ...mapGetters([
      'getSumPrice',
      'getSumCount'
    ])
  },
  created() {
    /*Header组件在页面一打开就获取一次CartArray*/
    this.$store.dispatch('getCart');
  },
}
</script>

<style scoped>
.navbar-brand{
  color: white;
}
</style>